<template>
    <div class="listBox">
        <div class="list-title contBackground">{{ title }}</div>
        <ul class="list-cont">
            <li v-for="(item, index) in listData" :key="index" @click="gotoPath(item.url)" class="textColor">
                <div class="left">
                    <div class="imgBox"><img :src="item.icon" alt=""></div>
                    <span>{{ item.name }}</span>
                </div>
                <div class="right">
                    <span :class="{ 'red': status == 0 || status == 3, 'yellow': status == 1, 'green': status == 2 }"
                        v-if=" item.url =='/certificationCenter'">{{
                        status == 0 ? $t('未认证') :
                        status == 1 ? $t('审核中') : status == 2? $t('已认证') : status == 3? $t('审核未通过') :''}}</span>
                    <img src="@/assets/image/userCenter/more.png" alt="">
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        props: {
            title: {
                type: String,
                default: "",
            },
            listData: {
                type: Array,
                default() {
                    return []
                }
            },
            status: {
                type: Number,
                default: 0,
            },
        },
        components: {

        },
        data(){
            return {

            }
        },
        methods: {
            gotoPath(url) {
                this.$router.push(url);
            }
        }
    }
</script>

<style lang="scss" scoped>








.listBox {
    .list-title {
        height: 92px;
        width: 100%;
        line-height: 92px;
        padding-left: 33px;
        color: #868D9A;
    }

    .list-cont {
        padding-left: 36px;
        padding-right: 40px;

        li {
            display: flex;
            justify-content: space-between;
            height: 100px;
            align-items: center;

            .left {
                display: flex;
                justify-content: center;
                align-items: center;

                .imgBox {
                    width: 44px;
                    height: 44px;
                    margin-right: 22px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

            }

            .right {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 30px;

                img {
                    width: 26px;
                    height: 26px;
                    margin-left: 22px;
                }

            }
        }
    }
}
.yellow{
    color: #F5C421;
}
.red{
    color:#F6465D
}
.green{
    color: #2EBD85;
}
</style>
